<template>
  <div>
    <headNav title="选择身份" ></headNav>
    <div class="flexHeight bigDivCss" >
      <span class="titleCss" >选择您的身份标签</span>
      <span style="margin: 0.2rem 0 0 0.7rem;" >不同的身份标签对应不同的功能权限</span>
      <div class="flexHeight" >
         <img src="@/assets/img/my/parent.png" mode=""  >
         <img src="@/assets/img/my/teacher.png" mode=""  >
      </div>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    headNav
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode
    })
  },
  data () {
    return {
    }
  },
  methods: {

  },
  mounted() {
    console.log(this.roleCode)
  }
}
</script>

<style lang="less" scoped>
.bigDivCss {
  width: 100%; 
  font-size: 0.27rem;
  .titleCss {
    font-size: 0.35rem; 
    font-weight: 600; 
    margin: 0.7rem 0 0 0.7rem;
  }
  div {
    width: 100%; 
    margin-top: 0.5rem; 
    justify-content: center; 
    align-items: center;
  }
  img {
    width: 6rem;
  }
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}
</style>
